<template>
  <div id="app">
	  	<mu-tabs style="height: 60px;" class="list" @change="handleTabChange">
		  <mu-tab value="tab1" icon="home" title="主页" class="list-icon"/>
		  <mu-tab value="tab2" icon="place" title="目的地" class="list-icon"/>
		  <mu-tab value="tab3" icon="explore" title="发现" class="list-icon"/>
		  <mu-tab value="tab4" icon="message" title="消息" class="list-icon" />
		  <mu-tab value="tab5" icon="person" title="我的" class="list-icon" />
			</mu-tabs>
    <router-view/>
  </div>
</template>

<script>
export default {
	data(){
		return {
      name: 'App',
      activeTab: 'tab1'
		}
	},
    methods:{
  	//点击导航跳转到对应的页面
  	handleTabChange(val){
  		this.$router.push({path:val})
  		this.activeTab = val
  	}
  }
}
</script>

<style>
		
		.list{
			background: #ffffff;
			position: fixed;
			bottom: 0;
			width:100%;
		}
		.list-icon{
			color: #747474;
			border-top:1px solid #efefef;
		}
		.list-icon:hover{
			color: #f9441f;
		}
</style>

